<!--
 * @Author: caihongtai caihongtai
 * @Date: 2025-03-01 21:16:24
 * @LastEditors: caihongtai caihongtai
 * @LastEditTime: 2025-03-19 23:03:58
 * @FilePath: /ai-interview-vue/src/components/JobSelector/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <van-popup :show="show" position="bottom" round closeable :style="{ height: '60%' }" @click-overlay="close"
        @click-close-icon="close">
        <div class="job-selector">
            <div class="header">
                <div class="title">选择岗位</div>
            </div>
            <div class="des">
                小面为你准备了可能合适的岗位信息，点击岗位名称即可填写到岗位信息中。
            </div>
            <div class="job-list">
                <div v-for="item in jobList" :key="item.id" class="job-item"
                    :class="{ active: selectedJob?.id === item.id }" @click="selectJob(item)">
                    {{ item.name }}
                </div>
            </div>
        </div>
    </van-popup>
</template>

<script setup>
    import { ref } from 'vue'
    import { jsonArray } from '@/utils/jsonArray'

    const props = defineProps({
        show: Boolean,
        modelValue: Object
    })

    const emit = defineEmits(['update:show', 'update:modelValue', 'select'])

    const selectedJob = ref(props.modelValue)

    // 关闭弹窗
    const close = () => {
        emit('update:show', false)
    }

    // 选择岗位
    const selectJob = (job) => {
        selectedJob.value = job
        emit('select', job)
        emit('update:modelValue', job)
        close()
    }

    // 使用 jsonArray 中的岗位列表
    const jobList = jsonArray.jobList
</script>

<style lang="scss" scoped>
    .job-selector {
        padding: 16px;
        max-height: 60vh;
        overflow-y: auto;

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;

            .title {
                font-size: 16px;
                font-weight: 500;
                color: #333;
            }
        }

        .job-list {
            margin-top: 12px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;

            .job-item {
                padding: 12px;
                text-align: center;
                background: #f5f6f7;
                border-radius: 8px;
                font-size: 14px;
                color: #333;
                cursor: pointer;

                &:active {
                    opacity: 0.8;
                }

                &.active {
                    background: rgba(138, 43, 226, 0.1);
                    color: #8a2be2;
                    border: 1px solid #8a2be2;
                }
            }
        }
    }
</style>